<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>0625-JS作业-完整事件封装-螺旋</title>
	<style type="text/css">
		html {
			font-family: "Microsoft YaHei";
		}
		body{
			margin: 0;
		}
		#box{
			width: 200px;
			height: 200px;
			margin: 100px;
			background-color: #1b75ff;
		}
	</style>
</head>
<body>
	<div id="box"></div>
</body>
<script >
	var oBox = document.getElementById('box'),
        fnZ,oEvList,num,fn1,fn2;
	
    fn1 = fnEvBind(oBox,'click,dblclick',function(){
	    this.style.width= '100px';
    },false);
    fn2 = fnEvBind(oBox,'click',function(){
        this.style.height= '100px';
    },false);
	
	//绑定监听事件
	function fnEvBind(node,evType,fnX,bool){
	    fnZ = fnX;//存储函数
        evType = evType.split(',');//将多事件类型的字符串切割为数组
        for(var i=0,eTl=evType.length;i<eTl;i++){
            if(node.addEventListener){//主流浏览器
                node.addEventListener(evType[i],fnZ,bool);
            }else{//ie浏览器
                fnZ = function(){
                    fnX.call(node,window.event);
                };
                node.attachEvent('on'+evType[i],fnZ);
            }
            //保存函数到对象
            // if(!node.oEvents){
            //    node.oEvents = {};
            // }
            // if(!node.oEvents[evType]){
            //    node.oEvents[evType] = [];
            // }
            oEvList = (node.oEvents || (node.oEvents = {}))[evType[i]] || (node.oEvents[evType[i]] = []);
            oEvList.push(fnZ);
        }
        return fnZ;
    }

    //双击解除事件绑定
    document.ondblclick = function(){
	    fnEvUnBind(oBox,'click,dblclick',fn1,false);
    };
	
    //解除事件绑定
    function fnEvUnBind(node,evType,fnX,bool){
        evType = evType.split(',');//将多事件类型的字符串切割为数组
        for(var i=0,eTl=evType.length;i<eTl;i++){
            if(!node.oEvents || !node.oEvents[evType[i]]){//判断是否已存在绑定事件
                return false;//如果不存在绑定事件 停止此函数
            }
            oEvList = node.oEvents[evType[i]];
            if(typeof fnX == 'function'){
                for(var j=0,eLl=oEvList.length;j<eLl;j++){
                    if(fnX == oEvList[j]){
                        num = j;
                        break;//如果找到了函数 则结束循环
                    }
                }
            }else{
                return false;
            }
            if(node.removeEventListener){//主流浏览器
                node.removeEventListener(evType[i],oEvList.splice(num,1)[0],bool);
            }else{//ie浏览器
                node.detachEvent('on'+evType[i],oEvList.splice(num,1)[0]);
            }
        }
    }

</script>
</html>